import React, { FC } from 'react';
import { Card, Input, Typography, Select, Button, Table } from 'antd';

const { Text } = Typography;
const { Option } = Select;

const SchoolInfoAudit: FC = () => {
  // 表格数据
  const dataSource = [
    {
      key: '1',
      number: '001',
      institutionCode: 'IC001',
      schoolName: '学校名称1',
      classCount: 5,
      plannedSchoolName: '规划口径名称1',
      jurisdiction: '区1',
      schoolCode: 'SC001',
      educationLevel: '层次1',
    },
    {
      key: '2',
      number: '002',
      institutionCode: 'IC002',
      schoolName: '学校名称2',
      classCount: 3,
      plannedSchoolName: '规划口径名称2',
      jurisdiction: '区2',
      schoolCode: 'SC002',
      educationLevel: '层次2',
    },
  ];

  // 表格列定义
  const columns = [
    {
      title: '编号',
      dataIndex: 'number',
      key: 'number',
    },
    {
      title: '机构编码',
      dataIndex: 'institutionCode',
      key: 'institutionCode',
    },
    {
      title: '学校名称',
      dataIndex: 'schoolName',
      key: 'schoolName',
    },
    {
      title: '班级数',
      dataIndex: 'classCount',
      key: 'classCount',
    },
    {
      title: '学校名称(规划口径)',
      dataIndex: 'plannedSchoolName',
      key: 'plannedSchoolName',
    },
    {
      title: '行政管辖区',
      dataIndex: 'jurisdiction',
      key: 'jurisdiction',
    },
    {
      title: '学校代码',
      dataIndex: 'schoolCode',
      key: 'schoolCode',
    },
    {
      title: '教育层次',
      dataIndex: 'educationLevel',
      key: 'educationLevel',
    },
    {
      title: '操作',
      key: 'operation',
      render: () => <Button type="link">查看</Button>,
    },
  ];

  return (
    <div>
      <div
        style={{
          backgroundColor: 'white',
          padding: '10px 20px',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
        }}
      >
        班级管理(区县)
      </div>
      <Card
        style={{
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        }}
      >
        <div className="slectr" style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
          <div style={{ marginRight: '20px' }}>
            <Text>学校名称(规划口径)：</Text>
            <Input placeholder="请输入学校名称(规划口径)" style={{ marginTop: '8px', width: '200px' }} />
          </div>
          <div style={{ marginRight: '20px' }}>
            <Text>学校名称：</Text>
            <Input placeholder="请输入学校名称" style={{ marginTop: '8px', width: '200px' }} />
          </div>
          <div>
            <Text>机构编程：</Text>
            <Input placeholder="请输入机构编程" style={{ marginTop: '8px', width: '200px' }} />
          </div>
        </div>
        <div className="slectr" style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ marginRight: '20px' }}>
            <Text>行政管辖区：</Text>
            <Select placeholder="请选择行政管辖区" style={{ marginTop: '8px', width: '100px' }}>
              <Option value="1">区1</Option>
              <Option value="2">区2</Option>
            </Select>
            <Select placeholder="请选择行政管辖区" style={{ marginTop: '8px', width: '100px' }}>
              <Option value="1">区1</Option>
              <Option value="2">区2</Option>
            </Select>
            <Select placeholder="请选择行政管辖区" style={{ marginTop: '8px', width: '100px' }}>
              <Option value="1">区1</Option>
              <Option value="2">区2</Option>
            </Select>
          </div>
          <div style={{ marginRight: '20px' }}>
            <Text>教育层次：</Text>
            <Select placeholder="请选择教育层次" style={{ marginTop: '8px', width: '200px' }}>
              <Option value="1">层次1</Option>
              <Option value="2">层次2</Option>
            </Select>
          </div>
          <div style={{ marginRight: '20px' }}>
            <Text>学校(机构)类别：</Text>
            <Select placeholder="请选择学校(机构)类别" style={{ marginTop: '8px', width: '200px' }}>
              <Option value="1">类别1</Option>
              <Option value="2">类别2</Option>
            </Select>
          </div>
          <div>
            <Text>办学类型：</Text>
            <Select placeholder="请选择办学类型" style={{ marginTop: '8px', width: '200px' }}>
              <Option value="1">类型1</Option>
              <Option value="2">类型2</Option>
            </Select>
          </div>
        </div>
        {/* 查询和重置按钮 */}
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '20px' }}>
          <Button type="primary" style={{ marginRight: '10px' }}>
            查询
          </Button>
          <Button type="default">重置</Button>
        </div>

        {/* 表格展示 */}
        <Table
          dataSource={dataSource}
          columns={columns}
          style={{ marginTop: '20px' }}
          pagination={false} // 如果不需要分页，可以设为 false
        />
      </Card>
    </div>
  );
};

export default SchoolInfoAudit;
